<div className="industrySolution_logistics">
  <section className="banner">
    <img className="bannerTitle" src="images/industrySolution/logistics_banner_new.png" alt="工程物流_专注、高效、专业、精准"/>
    <div className="c-layout c-shadow-style2 c-radius-style10 m-operate">
      <ul className="clearfix" id="tab-list">
        {
          this.state.tabArray.map(function(item, index){
              return (
                  <li key={index} className={index===0?"transition active":"transition"} data-index={item.dataIndex} onMouseEnter={component.toggleTab.bind(component)}>
                    <a className="transition" href="javascript:void(0);">
                        <span className="text">{item.title}</span>
                    </a>
                  </li>
              )
          })
        }
      </ul>
    </div>
  </section>

  <section className="g-section g-solutions" id="solutions">
      <div className="c-layout">
          <div className="m-solutions-content">
            <div  className="border-box">
                <img src="images/industrySolution/logistics_solution1.png" />
            </div>
            <div className="solutions-list clearfix transition">
                <a className="c-fl solutions-img transition">
                  {
                    this.state.tabArray.map(function(item, index){
                        return (
                            <img key={index} id={item.dataIndex + "-img"} className={index===0?"transition":"transition hide"} src={item.imgUrl} data-original={item.imgUrl} alt={item.title}/>
                        )
                    })
                  }
                </a>
                <div className="c-fr solutions-info">
                  {
                    this.state.tabArray.map(function(item, index){
                        return (
                            <span key={index} id={item.dataIndex + "-text"}  className={index===0?"text transition":"text transition hide"} >
                              {item.text}
                            </span>
                        )
                    })
                  }
                </div>
            </div>

          </div>
      </div>
  </section>

  <section className="g-section g-procedure" id="procedure">
      <div className="c-layout">
          <div className="m-shadow-title">
              <div className="u-shadow">PROCEDURE</div>
              <h1>业务流程</h1>
          </div>
          <div className="m-procedure-content clearfix">
              <a className="wrap-procedure-wrapper">
                <img className="lazy" data-original="images/industrySolution/logistics_procedure.svg" alt="业务流程" />
              </a>
          </div>
      </div>
  </section>

  <section className="g-section g-increment" id="increment">
      <div className="c-layout">
          <div className="m-shadow-title">
              <div className="u-shadow">SERVICE</div>
              <h1>增值服务</h1>
          </div>
          <div className="m-increment-content clearfix">
              <div className="wrap-increment-list clearfix">
                {
                  this.state.incrementArray.map(function(item, index){
                      return (
                          <div key={index} className={index===0?"increment-list active":"increment-list"} onMouseEnter={component.showServiceDetail.bind(component)}>
                              <div className="increment-list-item transition">
                                <img className="icon-img" src={item.iconUrl} width="100px" height="100px"></img>
                                <h2 className="title">{item.title}</h2>
                                <p className="text">{item.text}</p>
                              </div>
                              <div className={"increment-list-info transition bg" + (index+1) }>
                                <img className="icon-img top" src={item.iconTopUrl} width="40px" height="39.9px"></img>
                                  <h2 className="title">{item.title}</h2>
                                  <p className="text">{item.text}</p>
                              </div>
                              <div className="shadow-box"></div>
                          </div>
                      )
                  })
                }
              </div>
          </div>
      </div>
  </section>
  <section className="g-gallery" id="gallery">
    {
      this.state.galleryArray.map(function(item, index){
          return (
              <a className="img-box">
                <div className="cover"></div>
                <img key={index} className="photo transition lazy" data-original={item} alt="" />
              </a>
          )
      })
    }
  </section>

</div>
